<template>
  <div class="login">
    <div class="top">
      <img :src="logo" />
      <span>数字身份</span>
    </div>
    <div class="des">
      <div class="bg"></div>
    </div>

    <div class="login-con">
      <div class="con-title content-select">登录</div>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
        @keyup.enter="handleLogin"
      >
        <div class="title_login" style="margin-top: 20px">账号</div>
        <el-form-item prop="username">
          <el-input
          style="width:100%"
            v-model.trim="loginForm.username"
            placeholder="账号"
            type="text"
            tabindex="1"
            size="large"
          />
        </el-form-item>
        <div class="title_login">密码</div>
        <el-form-item prop="password">
          <el-input
          style="width:100%"
            v-model.trim="loginForm.password"
            placeholder="密码"
            type="password"
            tabindex="2"
            size="large"
            show-password
          />
        </el-form-item>
        <el-button
          type="primary"
          class="login_button"
          size="large"
          @click.prevent="handleLogin"
        >
          登 录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import custom from "@/utils/custom";
import { useRouter } from "vue-router";
import { nameValidator, isValidPwd } from "@/utils/validate";
import { ElMessage } from "element-plus";
import { login } from "@/api/login";
import store from "@/store";
const router = useRouter();
const loginFormRef = ref("loginForm");
const logo = custom.login[custom.area];
// const checked = ref(false);
/** 登录表单数据 */
const loginForm = reactive({
  username: "",
  password: "",
});
/** 手机号或邮箱校验 */
const validateUserName = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("账号不能为空"));
  } else {
    // 校验手机号和邮箱
    if (!nameValidator(value)) {
      rule.message = '请输入正确的账号';
      callback(new Error());
    } else {
      callback();
      // 注意，这个空的callback非常重要，没有它作为结束，整个校验会出问题
    }
  }
};
/** 密码校验 */
const validatePwd = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("密码不能为空"));
  }  else {
    // 校验密码
    if (!isValidPwd(value)) {
      rule.message = '8~64位字符，允许大、小写英文字母、特殊字符、数字，且至少3种组合';
      callback(new Error());
    } else {
      callback();
      // 注意，这个空的callback非常重要，没有它作为结束，整个校验会出问题
    }
  }
};
/** 登录表单校验规则 */
const loginFormRules = {
  username: [
    {
      required: true,
      validator: validateUserName,
      message: "输入正确的账号",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      validator: validatePwd,
      message: "8~64位字符，允许大、小写英文字母、特殊字符、数字，且至少3种组合",
      trigger: "blur",
    },
    { min: 8, max: 64, message: "8~64位字符，允许大、小写英文字母、特殊字符、数字，且至少3种组合", trigger: "blur" },
  ],
};
/** 登录逻辑 */
const handleLogin = () => {
  loginFormRef.value?.validate((valid) => {
    if (valid) {
      // // 用户登录
      store.userStore.loginAction(loginForm).then((res) => {
          if (res.success) {
            console.log("------loginSuccess-------");
            router.push({ path: "/Home"});
          }
        }).catch((err) => {
          loginForm.password = "";
          ElMessage.error(err.msg || "登录出错，请重试");
        }).finally(() => {});
    } else {
      return false;
    }
  });
};
</script>

<style>
@media all and (min-width: 1200px) {
  html {
    font-size: 12px;
  }

  /* 22 *3.03*/
}

@media all and (min-width: 1340px) {
  html {
    font-size: 12px;
  }

  /* 24 */
}

@media all and (min-width: 1440px) {
  html {
    font-size: 13px;
  }

  /* 25 */
}

@media all and (min-width: 1680px) {
  html {
    font-size: 15px;
    /* 28 */
  }
}

@media all and (min-width: 1920px) {
  html {
    font-size: 17px;
  }

  /* 33 */
}
</style>
<style>
.login-con .ivu-input {
  border: none !important;
  /*margin-left: 10px;*/
}

.login-con .ivu-input:hover {
  border-color: transparent !important;
}

.login-con .ivu-input:focus {
  box-shadow: none !important;
}

.login-con .ivu-input {
  font-size: 14px;
  background-color: transparent;
  height: 80%;
  color: #fff;
}

.ivu-tabs-bar {
  margin-bottom: 10px;
}

.login-con .ivu-tooltip {
  width: 100%;
}
</style>

<style lang="less" scoped>
.login_button {
  width: 100%;
  margin-bottom: 20px;
}
.login-con :deep .el-form-item {
  margin-bottom: 30px;
}
html {
  background-color: #f5f5f5;
}
.login {
  position: relative;
  height: 100%;
  background-color: #f5f5f5;
  :deep .el-input {
    width: 310px;
  }
  :deep .el-form-item__content {
    margin-left: 0 !important;
  }
  .top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #545c64;
    /*background-image: url('../assets/img/login/logo_new.png');*/
    /*background-size: 179px 26px;*/
    /*background-repeat: no-repeat;*/
    z-index: 2;
    text-align: left;
    display: flex;

    img {
      height: 35px;
      margin: 7px;
      margin-left: 40px;
    }

    span {
      color: #fff;
      font-weight: 500;
      font-size: 16px;
      margin: 18px 8px;
    }
  }

  .des {
    position: absolute;
    top: 14%;
    // top: 50px;
    left: 12%;

    .p1 {
      font-size: 20px;
      font-weight: 600;
    }
    .p2 {
      margin-top: 10px;
      font-size: 12px;
      font-weight: 600;
    }
  }

  .bg {
    margin-top: 15px;
    background: url("../assets/img/login/clouldbanner.png");
    width: 451px;
    height: 313px;
    background-size: 100% 100%;
  }

  .login-con {
    position: absolute;
    top: 18%;
    // top: 60px;
    right: 12%;
    padding: 0 3vw;
    width: 400px;
    background-size: 100% 100%;
    background-color: #fff;
    .title_login {
      margin-left: 5px;
      margin-bottom: 10px;
      font-size: 16px;
    }
    .con-content {
      padding-top: 20px;

      .center {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
      }
    }

    .con-title {
      display: flex;
      // align-items: center;
      justify-content: center;
      height: 26%;
      color: #000;
      font-size: 18px;
      letter-spacing: 10px;
      font-weight: 500;
      padding-top: 12%;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }
    .gradient {
      height: 1px;
      width: 100%;
      margin-bottom: 20px;
      background: -webkit-radial-gradient(
        #248fff,
        transparent,
        transparent
      ); /* Safari 5.1 - 6.0 */
      background: -o-radial-gradient(
        #248fff,
        transparent,
        transparent
      ); /* Opera 11.6 - 12.0 */
      background: -moz-radial-gradient(#248fff, transparent, transparent);
      /* Firefox 3.6 - 15 */
      background: radial-gradient(#248fff, transparent, transparent);
      /* 标准的语法 */
    }
    .captcha-code-main {
      display: flex;
      justify-content: space-between;
      width: 100%;
      border-bottom: 1px solid #e9e9e9;
    }
    .user-name,
    .password,
    .captcha-code {
      display: flex;
      align-items: center;
      width: 100%;
      height: 45px;
      border-bottom: 1px solid #1386fe;
      text-align: left;
      line-height: 40px;
      margin-top: 10px;
      img {
        width: 17px;
        height: auto; /*margin-left: 5px;*/
      }
      input {
        width: calc(100% - 45px);
        outline: none;
        border: none;
      }
      .iconfont_ibes {
        padding: 0 10px;
        color: #eee;
        font-weight: 600;
        font-size: 16px;
        line-height: 45px;
      }
    }
    .captcha-code {
      border: none;
    }
    .login-btn {
      width: 310px;
      box-sizing: border-box;
      height: 40px;
      line-height: 40%;
      margin: 40px auto 0;
      /*border-radius: 2px;*/
      /*background-image: linear-gradient(to right, #6bcdff, #1387ff);*/
      background-color: #36b3df;
      letter-spacing: 0.1em;
      text-align: center;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .pwd-related {
      height: 36px;
      margin-top: 10px;
      line-height: 36px;
    }
    .fr {
      float: right;
    }
    .fl {
      float: left;
    }
    .login-bottom {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      color: #f2f2f2;
      font-size: 14px;
      margin-bottom: 19%;
    }
  }
  .register {
    cursor: pointer;
    color: #007eff;
  }
  .add {
    margin-top: 10px;
  }
  .register:hover {
    color: #007eff;
  }
  .login-bottom-content {
    position: absolute;
    bottom: 10px;
    width: 100%;
    color: #fff;
    font-size: 14px;
  }
  .mask-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 66;
  }
}
.marquee-block {
  position: absolute;
  display: flex;
  padding: 5px;
  top: 3%;
  right: 10%;
  background: #215ec8;
  width: 31%;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  .icon-laba {
    vertical-align: middle;
    margin: auto 5px;
  }
  .right-scroll {
    color: #ffff00;
    font-size: 14px;
  }
}
.browser-main {
  position: absolute;
  top: 80.3%;
  right: 9.7%;
  width: 27.5%;
  color: #fff;
  .browser-title {
    width: 90%;
    font-weight: 700;
    font-size: 12px;
  }
  .browser-tip {
    display: flex;
    .tips-left,
    .tips-right {
      flex: 1;
      -webkit-text-size-adjust: none;
      text-align: left;
      font-size: 10px;
    }
  }
  .browser-link {
    cursor: pointer;
  }
}
.eye_img {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.qualink-logo {
  position: absolute;
  top: 90px;
  left: 19%;
}
.secretCenter {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  margin-left: 80px;
}
.left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 25px;
  margin-left: 95px;
}

.vertical_middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
